<!DOCTYPE html>
<!--conf
<sample>
              <product version="4.0b1" edition="std"/>
                     <modifications>
                            <modified date="130911"/>
                     </modifications>
               </sample>
-->
<html>
<head>
	<title>Container events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>

	<style>
		/* some custom style to make grid pretty in disabled state */
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue {
			border: 1px solid #c2d0dd !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue .ftr,
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue .xhdr {
			background-image: none !important;
			background-color: #fafafa !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.hdr tr {
			background-image: none !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.hdr td {
			border-right: 1px solid #c2d0dd !important;
			border-bottom: 1px solid #c2d0dd !important;
			color: #b2b2b2 !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue .odd_dhx_skyblue {
			background-color: #fafafa !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj.row20px tr td {
			color: #b2b2b2 !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj tr.rowselected,
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj.row20px tr.rowselected td,
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj tr.rowselected td.cellselected {
			background-image: none !important;
			background-color: white !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj tr.odd_dhx_skyblue.rowselected,
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj.row20px tr.odd_dhx_skyblue.rowselected td,
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj tr.odd_dhx_skyblue.rowselected td.cellselected {
			background-image: none !important;
			background-color: #fafafa !important;
		}
		.dhxform_obj_dhx_skyblue div.disabled div.gridbox_dhx_skyblue table.obj tr td span {
			color: #b2b2b2 !important;
		}
		/* grid styled ended */
		
		/* log */
		div#simpleLog {
			width: 500px;
			height: 200px;
			font-family: Tahoma;
			font-size: 11px;
			overflow: auto;
		}
	</style>
	<script>
		var myForm, formData, grid, logObj;
		function doOnLoad() {
			formData = [
				{type: "settings", labelWidth: 130, inputWidth: 170},
				{type: "checkbox", label: "Enable / Disable", checked: true, position: "label-right", list: [
					{type: "input", label: "Full Name", value: "Kaapori Lumikaastra"},
					{type: "input", label: "Email", value: "kaapori.lumi@gmail.com"},
					{type: "container", name: "myGrid", label: "Select Product", inputWidth: 330, inputHeight: 200}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);
			
			grid = new dhtmlXGridObject(myForm.getContainer("myGrid"));
			grid.setSkin("dhx_skyblue");
			grid.setImagePath("../../../codebase/imgs/");
			grid.loadXML("../common/grid.xml?etc="+new Date().getTime());
			
			// events
			
			// do now allow edit if grid disabled
			grid.attachEvent("onEditCell", function(state){
				// _isItemEnabled return true/false of enable/disable state, which is controlled by script
				// when isItemEnabled (w/o "_") - state controlled by user
				// wi need script-state here to check parent checkbox
				if (!myForm._isItemEnabled("myGrid")) return false;
				return true;
			});
			
			grid.attachEvent("onBeforeSelect", function(){
				if (!myForm._isItemEnabled("myGrid")) return false;
				return true;
			});
			
			// form events
			myForm.attachEvent("onEnable", function(name){
				if (name == "myGrid") changeState("enabled");
			});
			myForm.attachEvent("onDisable", function(name){
				if (name == "myGrid") changeState("disabled");
			});
			
		}
		
		// change grid state
		function changeState(state) {
			logEvent("grid's state changed to: "+state+"</br>");
		}
		
		// logs
		function logEvent(t) {
			if (!logObj) logObj = document.getElementById("simpleLog");
			logObj.innerHTML += t;
			logObj.scrollTop = logObj.scrollHeight;
		}
		function clearLog() {
			if (!logObj) logObj = document.getElementById("simpleLog");
			logObj.innerHTML = "";
		}
		
	</script>
</head>
<body onload="doOnLoad();">
	<table>
		<tr><td><div id="myForm"></div></td></tr>
		<tr><td style='padding-top: 20px;'><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr>
		<tr><td><div id="simpleLog"></div></td></tr>
	</table>
</body>
</html>